<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="400" height="800"></canvas>

    <script>
        var $app = new Easycanvas.Painter();

        $app.register(document.getElementById('app'));
        $app.start();

        $app.add({
            style: {
                left: 0, top: 0,
                width: 1000, height: 1000,
                backgroundColor: 'white',
                zIndex: 10,
            }
        });

        $app.add({
            content: {
                text: 1234,
            },
            style: {
                left: 100, top: 200,
                width: 200, height: 200,
                zIndex: -10,
            }
        });

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            window.Sprite1 = $app.add({
                name: 'root',
                content: {
                    img: img,
                },
                style: {
                    width: 222, height: 200,
                    cutLeft: 0, cutTop: 0, // source position, default 0
                    left: 50,
                    top: 80,
                    opacity: 0.5,
                    locate: 'lt', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    mousemove: function (e) {
                        // "this" means this Sprite, as Sprite1
                        console.log(this, e);
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
            });
        });
    </script>
</body>

